<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ECharts NO.1 零基础绘制ECharts图标</title>

	<style type="text/css">
		#chart-container {
			width: 800px;
			height: 600px;
			margin: 100px auto;
		}
	</style>
</head>
<body>
	<div id="chart-container"></div>

<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">
	 var myChart = echarts.init(document.getElementById('chart-container'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '柱状图和折线图混合'
            },
            tooltip: {},
            legend: {
                data:['销量','价格']
            },
            xAxis: {
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: [
            	{
            		type: 'value',
	            	name: '销量',
	            	min: 0,
	            	max: 320,
	            	interval: 40,
	            	axisLabel: {
	            		formatter: '{value} ml'
	            	}
	            },
	            {
            		type: 'value',
	            	name: '价格',
	            	min: 0,
	            	max: 800,
	            	interval: 100,
	            	axisLabel: {
	            		formatter: '{value} ￥'
	            	}
	            }
            ],
            series: [
	            {
	                name: '销量',
	                type: 'bar',
	                itemStyle: {
		                normal: {
		                    color: new echarts.graphic.LinearGradient(
		                        0, 0, 0, 1,
		                        [
		                            {offset: 0, color: '#E395E0'},
		                            {offset: 0.5, color: '#71056F'},
		                            {offset: 1, color: '#EAC6EA'}
		                        ]
		                    )
		                },
		                emphasis: {
		                    color: new echarts.graphic.LinearGradient(
		                        0, 0, 0, 1,
		                        [
		                            {offset: 0, color: '#2378f7'},
		                            {offset: 0.7, color: '#2378f7'},
		                            {offset: 1, color: '#71056F'}
		                        ]
		                    )
		                }
	            	},
	                data: [40, 93, 130,280,160,309,203,220,180,218,209,150]
	            },
	            {
	                name: '价格',
	                type: 'line',
	                yAxisIndex: 1,
	                data: [120, 133, 189,160,260,340,403,540,709,408,379,250]
	            }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
</body>
</html>